<template>
  <div class="app-container flex column">
    <top-title :updateTime="false" :content="content"></top-title>

    <div class="container-wrapper f1 flex column">
      <div class="inner-title">
        <span class="type-name">公文类型-</span><span class="t-name">《{{ docName }}》详情页</span>
      </div>
      <div class="title">
        <div class="icon"></div>
        <div class="context">基本信息</div>
      </div>
      <div class="detailModal">
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">公文名称</div>
              <div class="value common-value">{{ docName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">备注信息</div>
              <div class="value common-value">
                {{ $route.query.memo || officialDocumentManagementParams.memo || '暂无' }}
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">上传人员</div>
              <div class="value common-value">
                {{ $route.query.createBy || officialDocumentManagementParams.createBy || '暂无' }}
              </div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">上传时间</div>
              <div class="value common-value">
                {{ $route.query.createTime || officialDocumentManagementParams.createTime || '暂无' }}
              </div>
            </div>
          </div>
        </div>

        <div class="title" style="margin-top: 58px">
          <div class="icon"></div>
          <div class="context">生效版本</div>
        </div>

        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">版本名称</div>
              <div class="value common-value">{{ list.fileName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">更新描述</div>
              <div class="value common-value">
                {{ list.memo || '暂无' }}
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">添加人员</div>
              <div class="value common-value">{{ list.createBy || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">添加时间</div>
              <div class="value common-value">
                {{ list.createTime || '暂无' }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="title" style="margin-top: 54px">
        <div class="icon"></div>
        <div class="context">历史版本</div>
      </div>

      <div class="table-wrap f1">
        <div class="search-group">
          <div class="input-wrap">
            <div class="label">版本名称:</div>
            <div class="input-item">
              <a-input :maxLength="30" clearable v-model="queryParam.fileName" placeholder="请输入版本名称" />
            </div>
          </div>
          <div class="input-wrap">
            <div class="label">添加时间:</div>
            <div class="time-item">
              <start-end-time
                :times="times"
                :showTime="{ format: 'HH:mm:ss' }"
                format="YYYY-MM-DD HH:mm:ss"
                @timeChange="timeChange"
                :resetTime="resetTime"
              ></start-end-time>
            </div>
          </div>
          <div class="btn-wrap">
            <a-button
              class="searchBtn"
              @click="searchQuery(queryParam.createTime_begin, queryParam.createTime_end)"
              type="primary"
            >
              搜索
            </a-button>
            <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
          </div>
          <div class="btn-group">
            <a-button class="searchBtn" @click="addEditModal" type="primary"> 新增 </a-button>
          </div>
        </div>
        <a-table
          rowKey="id"
          class="tableList"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
          :loading="loading"
        >
          <template #status="records">
            <span v-if="records.status === 0 && records.enabled === 0">待生效</span>
            <span v-else-if="records.status == 0">已禁用</span>
            <span v-else-if="records.status === 1">已启用</span>
          </template>
          <template v-slot:action="records">
            <span class="operation deatil-color" @click="previewInfo(records)">预览</span>
            <span class="operation deatil-color" @click="addEditModal(records)" v-if="records.enabled == 0">编辑</span>
            <span
              class="operation deatil-color"
              @click="enableVision(records)"
              v-if="records.status == 0 && records.enabled == 0"
              >启用</span
            >
            <!-- <span class="operation deatil-color" @click="disableVision(records)" v-if="records.status == 1">禁用</span> -->
            <span v-else> </span>
          </template>
        </a-table>
      </div>
    </div>
    <detail-add-content ref="detailAddContent" @refresh="refresh"></detail-add-content>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import topTitle from '@/components/topTitle'
import startEndTime from '@/components/startEndTime'
import detailAddContent from './modules/detailAddContent'
import { documentVersionInfo, documentVersionEnable } from '@/api/document'
import { OFFICIAL_DOCUMENT_MANAGEMENT_PARAMS } from '../../store/mutation-types'
import { mapState } from 'vuex'

export default {
  name: '',
  components: { topTitle, startEndTime, detailAddContent },
  mixins: [JeecgListMixin],
  data() {
    return {
      content: [['公文管理', ''], []],
      url: {
        list: `/sys/document_version/page`,
      },
      list: {},
      ipagination: {
        current: 1,
        pageSize: 5,
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '版本名称',
          align: 'center',
          dataIndex: 'fileName',
        },
        {
          title: '添加时间',
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '添加人',
          align: 'center',
          dataIndex: 'createBy',
        },
        {
          title: '更新描述',
          align: 'center',
          dataIndex: 'memo',
        },
        {
          title: '状态',
          align: 'center',
          // dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  created() {
    this.queryParam.documentId = this.$route.query.id || this.officialDocumentManagementParams.id
  },
  computed: {
    ...mapState({
      officialDocumentManagementParams: (state) => state.app.officialDocumentManagementParams,
    }),
    docName() {
      return this.$route.query.documentName || this.officialDocumentManagementParams.documentName
    },
  },
  mounted() {
    this.getDocumentVersionInfo()
  },
  methods: {
    async getDocumentVersionInfo() {
      const data = { documentId: this.$route.query.id || this.officialDocumentManagementParams.id }
      let { result: list } = await documentVersionInfo(data)
      this.list = list
    },
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.startTime = this.$moment(v).valueOf()
        if (v == null) {
          this.queryParam.startTime = null
        }
      } else {
        this.queryParam.endTime = this.$moment(v).valueOf()
        if (v == null) {
          this.queryParam.endTime = null
        }
      }
    },
    searchQuery() {
      const { startTime, endTime } = this.queryParam
      if ((startTime && !endTime) || (!startTime && endTime)) {
        this.$message.error('开始时间结束时间必须同时选择')
        return
      }
      this.loadData(1)
    },
    searchReset() {
      const { documentId } = this.queryParam
      this.queryParam = {
        documentId,
      }
      this.resetTime = true
      this.loadData(1)
    },
    addEditModal(records) {
      records.documentName = this.$route.query.documentName || this.officialDocumentManagementParams.documentName
      records.documentId = this.$route.query.id || this.officialDocumentManagementParams.id
      this.$refs.detailAddContent.show(records)
    },
    previewInfo(records) {
      // 保存一下当前 页面的剩余参数
      let params =
        Object.keys(this.$route.query).length === 0 ? this.officialDocumentManagementParams : this.$route.query
      this.$store.commit(OFFICIAL_DOCUMENT_MANAGEMENT_PARAMS, params)
      this.$router.push({ path: '/officialDocManagement/preview', query: { id: records.id } })
    },
    refresh() {
      this.getDocumentVersionInfo()
      this.searchQuery()
    },
    async enableVision(records) {
      let res = await documentVersionEnable({ id: records.id })
      this.$message.success(res.message)
      this.getDocumentVersionInfo()
      this.searchQuery()
    },
    async disableVision(records) {},
  },
  destroy() {},
}
</script>

<style scoped lang="less">
.app-container {
  background: var(--theme-content-bg);

  .container-wrapper {
    background: var(--theme-container-bg);
    padding: 20px;
    .inner-title {
      font-size: 16px;
      margin-bottom: 30px;
      .type-name {
        font-weight: 500;
        font-size: 16px;
        color: #4093ff;
      }
      .t-name {
        color: #abd5ff;
      }
    }

    .title {
      display: flex;
      align-items: center;
      .icon {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 5px;
        background: #1388ff;
      }
      .context {
        font-size: 16px;
        font-weight: bold;
        color: #1388ff;
        position: relative;

        &::after {
          content: ''; // 必须
          position: absolute;
          left: 0px;
          bottom: 1px;
          right: 0;
          height: 6px;
          background: #1362b3;
          opacity: 0.6;
        }
      }
    }

    .info-wrap {
      .context-wrap {
        font-size: 14px;
        display: flex;
        margin-top: 30px;
        .label {
          min-width: 0.4rem;
          font-weight: 500;
          color: #509eee;
        }
        .context {
          font-weight: 500;
          color: #1388ff;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
